<template>
	<div>
		<div class="padd-wrapper">
			<el-steps
				:active="activeProductAddStep"
				align-center
				finish-status="success"
				@click="next"
			>
				<el-step title="填写商品信息"></el-step>
				<el-step title="填写促销信息"></el-step>
				<el-step title="填写商品属性"></el-step>
				<el-step title="选择商品关联"></el-step>
			</el-steps>
			<div class="con">
				<router-view></router-view>
			</div>
		</div>
	</div>
</template>

<script>
	import {getProductByQuery} from '@/api/product.js'
	import Vuex from 'vuex'
	let mapState = Vuex.mapState;

	export default {
		data(){
			return{
				// activeStep:0
			}
		},
		mounted() {
			// console.log("发送异步请求")
			/* axios.get("http://10.10.10.114:8080/product/list",{pageNum:1,pageSize:100})
			.then(resp=>{
				console.log(resp.data);
			}) */
			
			//创建实例
			//真正请求   ---    封装api
			
			
			//请求处理  ---   哪里用哪里处理
			//找api  product.js  {pageNum:1,pageSize:100}
			// getProductByQuery({pageNum:1,pageSize:100}).then(resp=>{
			// 	console.log(resp.data);
			// })
		},
		computed:{
			...mapState(["activeProductAddStep"]),
		},
		methods:{
			//切换到下一个步骤
			next(){
				if(this.activeStep++>3){
					this.activeStep=0;
				}
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.padd-wrapper{
		border:1px solid #ccc;
		margin:20px auto;
		// height:800px;
		width:740px;
		padding:30px;
		}
</style>
